<template>
  <page-card title="日志使用空间">
    <div class="card-wrap">
      <div class="card-item">
        <div class="label total">总空间</div>
        <div class="value">{{ spaceInfo.TotalSpace }}</div>
      </div>
      <div class="card-item">
        <div class="label use">已使用</div>
        <div class="value">{{ spaceInfo.UsedSpace }}</div>
      </div>
      <div class="card-item">
        <div class="label remaining">剩余</div>
        <div class="value">{{ spaceInfo.FreeSpace }}</div>
      </div>
    </div>
    <div class="echart-wrap">
      <div id="echart"></div>
    </div>
  </page-card>
</template>

<script>
import * as echarts from 'echarts'
import { fetchHardInfo } from '../../api/hard-info'
export default {
  name: 'HardInfo',
  data () {
    return {
      spaceInfo: {
        FreeSpace: '0B',
        TotalSpace: '0B',
        UsedSpace: '0B'
      },
      spaceRawData: {
        TotalSpace: 0,
        UsedSpace: 0,
        FreeSpace: 0
      }
    }
  },
  created () {
    this.getHardInfo()
  },
  methods: {
    async getHardInfo () {
      const res = await fetchHardInfo()
      if (Array.isArray(res) && res.length > 0) {
        this.spaceInfo = res[0]
        this.spaceRawData = res[0]?.rawData
        this.$nextTick(() => {
          this.initEchart()
        })
      }
    },
    initEchart () {
      const myChart = echarts.init(document.getElementById('echart'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          top: 'top'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.spaceRawData.UsedSpace, name: '已使用', label: { formatter: '{b} ({d}%)' }, itemStyle: { color: '#d9001b' }, tooltip: { valueFormatter: (value) => this.getShowTextByValue(value) } },
              { value: this.spaceRawData.FreeSpace, name: '剩余', label: { formatter: '{b} ({d}%)' }, itemStyle: { color: '#aaa' }, tooltip: { valueFormatter: (value) => this.getShowTextByValue(value) } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 通过图表中value反向查询spaceInfo中对应的显示值
    getShowTextByValue (value) {
      const keys = Object.keys(this.spaceRawData)
      const targetKey = keys.find((key) => {
        return this.spaceRawData[key] === value
      })
      return this.spaceInfo[targetKey]
    }
  }
}
</script>

<style lang="less" scoped>
.card-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  gap: 40px;
}
#echart {
  margin-top: 20px;
  height: 500px;
}
.card-item {
  width: 200px;
  box-sizing: border-box;
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  padding: 20px;
  text-align: center;
  &:hover {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
  .label {
    font-size: 34px;
    font-weight: bold;
    &.total {
      color: #1890ff;
    }
    &.use {
      color: #d9001b;
    }
    &.remaining {
      color: #aaaaaa;
    }
  }
  .value {
    font-size: 28px;
    color: #8f8f8f;
  }
}
</style>